<template> 
	<div class="list">
    <div>
      <div v-for="(item,index) of list" :key="index" class="item-container">
        <div class="item-icon"></div>
        <span class="item-title"> {{item.title}}</span>
        
        <div v-if="item.children" class="item-children">
          <detail-list :list="item.children"></detail-list>
        </div>
      </div>

    </div>

  </div>
</template> 

<script> 
  export default { 
    name:"DetailList",
    data () { 
      return { 
      }; 
    }, 
    props:{
      list:Array
    },

    methods: { 

    },
    mounted(){

    }


  }; 
</script> 

<style scoped> 
.item-container{
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
}
.item-icon{
  display: inline-block;
  width: .36rem;
  height: .36rem;
  top: .26rem;
  left: .2rem;
  background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
  margin-right: .1rem;
  background-size: .4rem 3rem;
}
.item-title{
  line-height: 30px;
}
.item-children{
  text-indent: 20px;
}
</style> 